<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <Bar></Bar>
    <el-container>
      <el-table :data="tableData">
        <el-table-column prop="goods_id" label="Goods ID" width="140" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="price" label="Price" />
      </el-table>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios';
import Bar from "../components/Bar.vue";

export default {
  name: 'optionTwo',
  components: { Bar },
  data() {
    return {
      msg: 'Option Two',
      tableData: [] // 确保定义了tableData
    }
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      axios.get('http://localhost:3000/goods') // 使用 axios 进行 HTTP 请求
        .then(response => {
          console.log(response.data);
          this.tableData = response.data; // 将 API 返回的数据赋值给 tableData
        })
        .catch(error => {
          console.log(error); // 捕获并打印错误
        });
    }
  }
};
</script>
